<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Templates</title>
	<link rel='STYLESHEET' type='text/css' href='./../dhtmlxSchedulerConfigurator.css'>
	<script src='./../dhtmlx.js'></script>
</head>
<script>
	var validation = {

		templates_minmin: function(value) {
			var reg = /^[0-9]+$/;
			var result = reg.test(value);
			return result;
		},
		
		templates_hourheight: function(value) {
			var reg = /^[0-9]+(px)?$/;
			var result = reg.test(value);
			return result;
		}, 
		
		templates_starthour: function(value) {
			var reg = /^[0-9]+$/;
			var result = reg.test(value);
			result = ((parseInt(value) <= 24)&&(result));
			return result;
		},
		
		templates_endhour: function(value) {
			var reg = /^[0-9]+$/;
			var result = reg.test(value);
			result = ((parseInt(value) <= 24)&&(result));
			return result;
		}
	};

	window.onload = function() {
		var locale = parent.conf.i18n.templates;
		var els = document.getElementsByTagName('*');
		for (var i in els) {
			if (els[i].getAttribute) {
				var attr = els[i].getAttribute('serialize');
				if (attr == 'true') {
					dhtmlxEvent(els[i], 'change', inputChanged);
				}
			}
			if (els[i].getAttribute) {
				var text = els[i].getAttribute('locale');
				if (text) {
					els[i].innerHTML = locale[text];
				}
			}
		}
		parent.conf.loaded++;
		parent.conf.loadingCheck();
	}

	
	function inputChanged() {
		var name = this.name;
		var value = this.value;
		if (validation[name]) {
			var result = validation[name](value);
			if (result == true) {
				this.className = this.className.replace(/ dhtmlxInvalidValue/g,"");
			} else {
				this.className = this.className.replace(/ dhtmlxInvalidValue/g,"");
				this.className += " dhtmlxInvalidValue";
			}
		}
		parent.conf.getXML();
		return true;
	}


	function getOptions() {
		var xml = '';
		var optionsArray = new Array('templates_defaultdate', 'templates_monthdate', 'templates_weekdate', 'templates_daydate', 'templates_hourdate', 'templates_monthday',
				'templates_minmin', 'templates_hourheight', 'templates_starthour', 'templates_endhour', 'templates_agendatime', 'templates_eventtext', 'templates_eventheader', 'templates_eventbartext');

		for (var i = 0; i < optionsArray.length; i++) {
			
			var elem = document.getElementById(optionsArray[i]);
			if (elem.getAttribute('type') == 'checkbox') {
				xml += '<' + optionsArray[i] + '>' + elem.checked + '</' + optionsArray[i] + ">";
			} else {
				xml += '<' + optionsArray[i] + '><![CDATA[' + elem.value + ']]></' + optionsArray[i] + ">";
			}
		}
		return xml;
	}

	function setOptions(xml) {
		var xmlString = '';
		var els = xml.childNodes;
		for (var i = 0; i < els.length; i++) {
			if (els[i].childNodes[0]) {
				var value = els[i].childNodes[0].nodeValue;
				var reg = /&lt;/g;
				value = value.replace(reg, "<");
				var reg = /&gt;/g;
				value = value.replace(reg, ">");
			} else {
				var value = '';
			}
			var el = document.getElementById(els[i].nodeName);
			if (el) {
				if (el.getAttribute('type') == 'checkbox') {
					if (value == 'true') {
						el.checked = true;
					} else {
						el.checked = false;
					}
				} else {
					el.value = value;
				}
			}
		}
	}
</script>
<body>
	<div class="dhtmlxLeftDiv" style="height: 50%;">
		<div class="dhtmlxSettingPanel">
			<div class="dhtmlxSettingPanelLabel" locale="dateformats">Date formats</div>
			<div class="clr_label">&nbsp;</div>
			<label for="templates_defaultdate" class="dhtmlxInputLabel" locale="default_date">Default date </label><input type="text" name="templates_defaultdate" id="templates_defaultdate" value="" class="dhtmlxInputText" serialize="true"  />
			<div class="clr">&nbsp;</div>
			
			<label for="templates_monthdate" class="dhtmlxInputLabel" locale="month_date">Month date </label><input type="text" name="templates_monthdate" id="templates_monthdate" value="" class="dhtmlxInputText" serialize="true"  />
			<div class="clr">&nbsp;</div>
			
			<label for="templates_weekdate" class="dhtmlxInputLabel" locale="week_date">Week date </label><input type="text" name="templates_weekdate" id="templates_weekdate" value="" class="dhtmlxInputText" serialize="true"  />
			<div class="clr">&nbsp;</div>
			
			<label for="templates_daydate" class="dhtmlxInputLabel" locale="day_date">Day date </label><input type="text" name="templates_daydate" id="templates_daydate" value="" class="dhtmlxInputText" serialize="true"  />
			<div class="clr">&nbsp;</div>
			
			<label for="templates_hourdate" class="dhtmlxInputLabel" locale="hour_date">Hour time </label><input type="text" name="templates_hourdate" id="templates_hourdate" value="" class="dhtmlxInputText" serialize="true"  />
			<div class="clr">&nbsp;</div>
			
			<label for="templates_monthday" class="dhtmlxInputLabel" locale="month_day">Month day </label><input type="text" name="templates_monthday" id="templates_monthday" value="" class="dhtmlxInputText" serialize="true"  />
			<div class="clr">&nbsp;</div>
			<div class="hint"><span locale="about_formats">See more about date formats</span> <a href="http://docs.dhtmlx.com/doku.php?id=dhtmlxscheduler:settings_config#date_configuration" target="blank" locale="here">here</a></div>
		</div>
	</div>
	<div class="dhtmlxRightDiv" style="height: 66%;">
		<div class="dhtmlxSettingPanel">
			<div class="dhtmlxSettingPanelLabel" locale="scales">Scales</div>
			<div class="clr_label">&nbsp;</div>
			<label for="templates_minmin" class="dhtmlxInputLabel" locale="minmin" style="width: 100%;">Minimal date size step in minutes </label><br /><input type="text" name="templates_minmin" id="templates_minmin" value="" class="dhtmlxInputText" style="width: 50%;" serialize="true"  />
			<div class="clr">&nbsp;</div>
			
			<label for="templates_hourheight" class="dhtmlxInputLabel" locale="hourheight" style="width: 100%;">Height of 1 hour in pixels </label><br /><input type="text" name="templates_hourheight" id="templates_hourheight" value="" class="dhtmlxInputText" style="width: 50%;" serialize="true"  />
			<div class="clr">&nbsp;</div>
			
			<label for="templates_starthour" class="dhtmlxInputLabel" locale="starthour" style="width: 100%;">Hour from which day and week scales start </label><br /><input type="text" name="templates_starthour" id="templates_starthour" value="" class="dhtmlxInputText" style="width: 50%;" serialize="true"  />
			<div class="clr">&nbsp;</div>
			
			<label for="templates_endhour" class="dhtmlxInputLabel" locale="endhour" style="width: 100%;">Hour from which day and week scales end </label><br /><input type="text" name="templates_endhour" id="templates_endhour" value="" class="dhtmlxInputText" style="width: 50%;" serialize="true"  />
			<div class="clr">&nbsp;</div>

			<label for="templates_agendatime" class="dhtmlxInputLabel" locale="agendatime" style="width: 100%;">Agenda time period </label><br /><input type="text" name="templates_agendatime" id="templates_agendatime" value="" class="dhtmlxInputText" style="width: 50%;" serialize="true"  />
			<div class="clr">&nbsp;</div>
			<div class="hint"><span locale="about_scales">See more about scales</span> <a href="http://docs.dhtmlx.com/doku.php?id=dhtmlxscheduler:settings_config#scales" target="blank" locale="here">here</a></div>
		</div>
	</div>
	<div class="clr">&nbsp;</div>
	<div class="dhtmlxBottomDiv">
		<div class="dhtmlxSettingPanel">
			<div class="dhtmlxSettingPanelLabel" locale="eventtemplates">Date formats</div>
			<div class="clr_label">&nbsp;</div>
			<label for="templates_eventtext" class="dhtmlxInputLabel">scheduler.templates.event_text=function(start,end,event){</label>
			<div class="clr">&nbsp;</div>
			<textarea name="templates_eventtext" id="templates_eventtext" value="" class="dhtmlxTextarea" serialize="true" >return "Text:<b> "+event.text+"</b><br>"+"Descr."+event.details;</textarea>
			<label for="templates_eventtext" class="dhtmlxInputLabel">}</label><br>
			<div class="clr">&nbsp;</div>
			<label for="templates_eventheader" class="dhtmlxInputLabel">scheduler.templates.event_header=function(start,end,event){</label>
			<div class="clr">&nbsp;</div>
			<textarea name="templates_eventheader" id="templates_eventheader" value="" class="dhtmlxTextarea" serialize="true" >return (event.important?"<img src='important.gif' />":"")+scheduler.templates.hour_scale(start);</textarea>
			<label for="templates_eventheader" class="dhtmlxInputLabel">}</label><br>
			<div class="clr">&nbsp;</div>
			<label for="templates_eventbartext" class="dhtmlxInputLabel">scheduler.templates.event_bar_text=function(start,end,event){</label>
			<div class="clr">&nbsp;</div>
			<div class="clr">&nbsp;</div>
			<textarea name="templates_eventbartext" id="templates_eventbartext" value="" class="dhtmlxTextarea" serialize="true" >var text = event.text.substr(0,20); 
return "<span title='"+event.text+"'>"+text+"</span>";</textarea>
			<label for="templates_eventbartext" class="dhtmlxInputLabel">}</label><br>
			<div class="clr">&nbsp;</div>
			<div class="hint"><span locale="about_templates">See more about event templates</span> <a href="http://docs.dhtmlx.com/doku.php?id=dhtmlxscheduler:custom_styling#redefining_content" target="blank" locale="here">here</a></div>
		</div>
	</div>
</body>
</html>